<template>
  <div class="box">
    <!-- <el-button type="primary">主要按钮</el-button> -->

    <div class="centent">
      <Watermark text="这是一个水印" :visible="watermarkVisible"></Watermark>
      <div class="centent_top">
        <div class="centent_top_left">
          <h3 class="centent_top_left_title">
            Rivian Automotive (RIVN.US) 2025年第二季度业绩电话会
          </h3>
          <div class="centent_top_left_details">
            详情
            <img class="centent_top_left_details_img" src="@/assets/icon/right.svg" alt="" />
          </div>
          <div class="centent_top_left_details">
            <img class="centent_top_left_details_img" src="@/assets/icon/date.svg" alt="" />
            2025年 08月06日 05:00
          </div>
          <div class="centent_top_left_details">
            <img class="centent_top_left_details_img" src="@/assets/icon/人3.svg" alt="" />
            进门(进门)
          </div>
          <div class="centent_top_left_label">海外研究</div>
          <div class="centent_top_left_label">Rivian Automotive</div>
        </div>
        <div class="centent_top_right">
          <div @click="show = true" class="centent_top_right_label">
            <img class="centent_top_right_label_image" src="@/assets/icon/布局.svg" alt="" />布局
          </div>
          <div class="centent_top_right_label">
            <img class="centent_top_right_label_image" src="@/assets/icon/T.svg" alt="" />标准
          </div>
        </div>
      </div>
      <div class="centent_bottom">
        <div class="centent_bottom_left">
          <div class="centent_bottom_left_f1">
            <div class="centent_bottom_left_f1_left">
              <div class="centent_bottom_left_f1_left_item active">原版</div>
              <div class="centent_bottom_left_f1_left_item">精炼版</div>
            </div>
            <div class="centent_bottom_left_f1_right">
              <img style="width: 20px; height: 20px" src="@/assets/icon/搜索.svg" alt="" />
              <div class="centent_bottom_left_f1_right_label">
                双语
                <img
                  class="centent_bottom_left_f1_right_label_image"
                  src="@/assets/icon/arrow-down-s-fill.svg"
                  alt=""
                />
              </div>
            </div>
          </div>
          <!-- f2 -->
          <div class="centent_bottom_left_f2">共60268字,预计阅读时长101分钟</div>
          <!-- f3 内容 -->
          <div class="centent_bottom_left_f3" v-for="item in 150" :key="item">
            <div class="centent_bottom_left_f3_top">
              <img
                style="width: 26px; height: 26px; margin-right: 10px"
                src="@/assets/icon/会议申请.svg"
                alt=""
              />
              会议助手&nbsp;&nbsp;&nbsp;00:01
            </div>
            <div class="centent_bottom_left_f3_English">
              <p>
                Good afternoon, and thank you for joining us for today's second quarter 2025
                earnings call.Today, I am joined by RJK range, our co-founder car mic donor, our
                chief financial officer and hobby ebay la a, our chief Operations officer.
              </p>
            </div>
            <div class="centent_bottom_left_f3_CN">
              <p>
                下午好，感谢您参加我们今天的2025年第二季度收益电话会议。今天，我和RKRange，我们的联合创始人，汽车麦克风捐赠者，我们的首席财务官和
                Hobby eBay LaA，我们的首席运营官一起出席。
              </p>
            </div>
          </div>
        </div>
        <div class="centent_bottom_right">
          <!-- 一楼 -->
          <div class="centent_bottom_right_f1">
            <div class="centent_bottom_right_f1_center">
              <p class="centent_bottom_right_f1_item active">AI进宝</p>
              <p class="centent_bottom_right_f1_item">我的笔记</p>
              <p class="centent_bottom_right_f1_item">相关推荐</p>
            </div>
          </div>
          <div class="centent_bottom_right_f2">
            <div class="centent_bottom_right_f2_left">
              <div class="centent_bottom_right_f2_left_item active">要点</div>
              <div class="centent_bottom_right_f2_left_item">章节</div>
              <div class="centent_bottom_right_f2_left_item">问答</div>
              <div class="centent_bottom_right_f2_left_item">指标</div>
              <div class="centent_bottom_right_f2_left_item">对话</div>
            </div>
          </div>
          <!-- 内容 -->
          <div class="centent_bottom_right_f3">
            <div class="centent_bottom_right_f3_item" v-for="item in 5" :key="item">
              <h1>{{ item }}.公司进展与业务亮点</h1>
              <ul class="centent_bottom_right_f3_item_ul">
                <li class="centent_bottom_right_f3_item_ul_li" v-for="item in 5" :key="item">
                  <p>
                    <span>技术与产品：</span>
                    第二季度汽车产量5979辆，交付10661辆，汽车收入9.27亿美元。因产量下降，汽车毛利润受影响，损失3.35亿美元。综合收入13亿美元
                    润损失2.06亿美元，调整后EVA损失6.67亿美元。运营费用因核心技术投资和销售服务基础设施建设略有增加，预计下半年继续增加。第二季度通过
                    资和债券再融资加强了资产负债表，获得10亿美元股权投资，发行12.5亿美元绿色担保债券。预计还将从合资交易和能源部贷款获得额外资金。
                  </p>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="share" v-show="show">
      <div class="share_center">
        <div class="f1">
          <img @click="show = false" class="f1_image" src="@/assets/icon/叉.svg" alt="" />
        </div>
        <div class="aaaa">
          <div class="f2">
            <div class="f2_item active">
              <h3>方式一：</h3>
              <h3>邀请注册成功送洞见卡</h3>
            </div>
            <div class="f2_item">
              <h3>方式二：</h3>
              <h3 style="width: 70%">
                在平台发布或评论符合要求的内容，并@官 方账号，发布成功后可获得洞见卡
              </h3>
            </div>
          </div>
          <div class="f3">
            复制以下链接，发送给你的好友或发布到社交平台，完成注册后将分别获赠价值¥25元的洞见卡
          </div>
          <div class="f4">
            <img class="f4_img" src="@/assets/icon/知乎.svg" alt="" />
            <img class="f4_img" src="@/assets/icon/知乎.svg" alt="" />
            <img class="f4_img" src="@/assets/icon/知乎.svg" alt="" />
            分别送100页外文研报、实时外文研报和中文研报，上市公告、会议
          </div>
          <div class="f5">
            <div class="f5_left">
              <h3>洞见报告-海量行业、上市公司研究报告，访问我的邀请链接：</h3>
              <div class="f5_input">
                <p id="contentToCopy">
                  https://www.djyanbao.com/report/detail?id=4146907&from=search_list&aiStatus=undefined
                </p>
                <div class="btn" @click="copy">复制</div>
              </div>
              <h4>新用户登录就赠送洞见卡，全部报告免费看！</h4>
            </div>
            <div class="f5_right">
              <img src="@/assets/image/组46.png" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Watermark from '../components/Watermark.vue'
import '@/CSS/home.css'

export default {
  components: {
    Watermark
  },
  data() {
    return {
      watermarkVisible: '',
      show: true
    }
  },
  mounted() {},
  methods: {
    async copy() {
      let value = document.getElementById('contentToCopy').innerText
      await navigator.clipboard.writeText(value)
      alert('复制成功')
    }
  }
}
</script>
<style scoped lang="scss">
.share {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.3);
  // background: pink;
  .share_center {
    width: 60%;
    height: 85%;
    background: #fff;
    border-radius: 15px;
    .f1 {
      position: relative;
      width: 100%;
      height: 240px;
      background: url(@/assets/home/banner.png) no-repeat;
      background-size: 100% 100%;
      border-radius: 15px 15px 0 0;
      .f1_image {
        position: absolute;
        right: 30px;
        top: 30px;
      }
    }
    .aaaa {
      padding: 50px 40px;
      .f2 {
        display: flex;

        width: 100%;
        height: 60px;
        background: #fff;
        color: #327bfb;
        .f2_item {
          display: flex;
          align-items: center;
          justify-content: center;
          flex: 1;
          font-size: 16px;
          border: 1px solid #327bfb;
          cursor: pointer;
          &.active {
            color: #fff;
            background: #327bfb;
          }
        }
      }
      .f3 {
        font-size: 18px;
        color: #da5f0d;
        margin: 30px 0;
        font-weight: 500;
      }
      .f4 {
        font-size: 18px;
        font-weight: 500;
        color: #eb4b23;
        .f4_img {
          width: 50px;
          height: 50px;
          margin-right: 30px;
        }
      }
      .f5 {
        position: relative;
        display: flex;
        align-items: center;
        padding: 30px 20px;
        // width: 100%;
        height: 150px;
        background: #f6f7f9;
        margin-top: 30px;
        .f5_left {
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          flex: 1;
          h3 {
            font-size: 18px;
            color: #333;
            font-weight: 540;
          }
          h4 {
            font-size: 17px;
            color: #807f7f;
            font-weight: 540;
          }
          .f5_input {
            display: flex;
            align-items: center;
            height: 60px;
            width: 70%;
            // background: #327bfb;
            background: #fff;
            p {
              padding: 0 20px;
              flex: 1;
              white-space: nowrap; /* 防止文本换行 */
              overflow: hidden; /* 隐藏溢出的内容 */
              text-overflow: ellipsis; /* 显示省略号来表示溢出内容 */
              font-size: 20px;
              color: #333;
            }
            .btn {
              display: flex;
              align-items: center;
              justify-content: center;
              color: #fff;
              width: 120px;
              height: 100%;
              font-size: 22px;
              font-weight: 550;
              background: #327bfb;
              border-radius: 0 6px 6px 0;
              cursor: pointer;
            }
          }
        }
        .f5_right {
          position: absolute;
          right: 20px;
          img {
            width: 120px;
            height: 120px;
          }
        }
      }
    }
  }
}
</style>
